import React, { Component } from 'react';
import { Icon } from '@alifd/next';
import IceContainer from '@icedesign/container';
import { FormattedMessage, injectIntl } from 'react-intl';
import FoundationSymbol from '@icedesign/foundation-symbol';
import './BasicIcon.scss';

@injectIntl
export default class BasicIcon extends Component {
  static displayName = 'BasicIcon';

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <IceContainer>
          <h3 style={{fontSize: 20, color: '#333333', marginBottom: 0}}>
            <FormattedMessage id="app.menu.icon.basic.title" />
          </h3>
          <div style={{display: 'flex', flexDirection: 'row'}}>
            <ul className="icon-list">
              <li>
                <FoundationSymbol size="small" type={'bangzhu'} />
                <span>bangzhu</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'cascades'} />
                <span>cascades</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'home2'} />
                <span>home2</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'activity'} />
                <span>activity</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'qrcode'} />
                <span>qrcode</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'light'} />
                <span>light</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'table'} />
                <span>table</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'link'} />
                <span>link</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'copy'} />
                <span>copy</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'creative'} />
                <span>creative</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'phone'} />
                <span>phone</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'angle-down'} />
                <span>angle-down</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'edit'} />
                <span>edit</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'hourglass'} />
                <span>hourglass</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'coupons'} />
                <span>coupons</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'repair'} />
                <span>repair</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'shopcar'} />
                <span>shopcar</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'cross'} />
                <span>cross</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'clock'} />
                <span>clock</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'search'} />
                <span>search</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'message'} />
                <span>message</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'exchange'} />
                <span>exchange</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'delete'} />
                <span>delete</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'angle-up'} />
                <span>angle-up</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'redpacket'} />
                <span>redpacket</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'speaker'} />
                <span>speaker</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'transfer-left'} />
                <span>transfer-left</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'transfer-right'} />
                <span>transfer-right</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'customize'} />
                <span>customize</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'down'} />
                <span>down</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'publish'} />
                <span>publish</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'attachment'} />
                <span>attachment</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'eye'} />
                <span>eye</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'location'} />
                <span>location</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'backward'} />
                <span>backward</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'forward'} />
                <span>forward</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'rmb'} />
                <span>rmb</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'notice'} />
                <span>notice</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'yichang'} />
                <span>yichang</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'yonghu'} />
                <span>yonghu</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'shop'} />
                <span>shop</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'fans2'} />
                <span>fans2</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'chart'} />
                <span>chart</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'lock'} />
                <span>lock</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'code'} />
                <span>code</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'horn'} />
                <span>horn</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'home'} />
                <span>home</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'tubiaoqiehuan'} />
                <span>tubiaoqiehuan</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'bell'} />
                <span>bell</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'person'} />
                <span>person</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'bold'} />
                <span>bold</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'background-color'} />
                <span>background-color</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'font-color'} />
                <span>font-color</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'underline'} />
                <span>underline</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'italics'} />
                <span>italics</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'font-size'} />
                <span>font-size</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'ol-list'} />
                <span>ol-list</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'align-center'} />
                <span>align-center</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'align-flex'} />
                <span>align-flex</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'float-full'} />
                <span>float-full</span>
              </li> 



              <li>
                <FoundationSymbol size="small" type={'float-left'} />
                <span>float-left</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'quote'} />
                <span>quote</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'align-right'} />
                <span>align-right</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'align-left'} />
                <span>align-left</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'ul-list'} />
                <span>ul-list</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'store'} />
                <span>store</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'topic'} />
                <span>topic</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'anchor'} />
                <span>anchor</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'video'} />
                <span>video</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'sucai'} />
                <span>sucai</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'picture'} />
                <span>picture</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'gif'} />
                <span>gif</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'task'} />
                <span>task</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'guanbi'} />
                <span>guanbi</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'wenzhang-copy'} />
                <span>wenzhang-copy</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'question'} />
                <span>question</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'mail'} />
                <span>mail</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'image'} />
                <span>image</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'result'} />
                <span>result</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'question2'} />
                <span>question2</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'key'} />
                <span>key</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'content'} />
                <span>content</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'edit2'} />
                <span>edit2</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'menu'} />
                <span>menu</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'collapse'} />
                <span>collapse</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'correct'} />
                <span>correct</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'directory'} />
                <span>directory</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'fans'} />
                <span>fans</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'compass'} />
                <span>compass</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'chart1'} />
                <span>chart1</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'quote2'} />
                <span>quote2</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'gif2'} />
                <span>gif2</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'pin'} />
                <span>pin</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'video2'} />
                <span>video2</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'item'} />
                <span>item</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'material'} />
                <span>material</span>
              </li>

              <li>
                <FoundationSymbol size="small" type={'table1'} />
                <span>table1</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'gaojingxinxi'} />
                <span>gaojingxinxi</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'shezhi'} />
                <span>shezhi</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'skin_light'} />
                <span>skin_light</span>
              </li>  
              <li>
                <FoundationSymbol size="small" type={'requ'} />
                <span>requ</span>
              </li>  
              
            </ul>
          </div>
      </IceContainer>
    );
  }
}


